function userinfo() {
    var content = document.querySelector('.content')
    var nicknameB = document.querySelector('.nickname')
    var identityB = document.querySelector('.identity')
    var usernameB = document.querySelector('.username')
    var id = localStorage.getItem('id')
    var token = localStorage.getItem('token')
    console.log(id, token);
    
    if (id && token) {
        var xhr = new XMLHttpRequest;
        xhr.open('get', `http://localhost:8888/users/info/${id}`)
        xhr.setRequestHeader('authorization', token)
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText;
                    res = JSON.parse(res)
                    console.log(res);
                    if (res.code === 0) {
                        alert("请先登录")
                        location.href = "login.html"
                    }
                    var { info: { username, nickname, identity } } = res
                    //将请求到的用户名，放到修改密码的表单中
                    document.querySelector('[name="username"]').value = username
                    document.querySelector('.login').innerHTML = `
                        <a href="userinfo.html?id=${id}&token=${token}" class="user">登录成功</a>
                        <a data-id="${id}" data-token="${token}" href="javascript:;" class="logout">退出</a>
                    `
                    // 将个人信息显示在页面中
                    usernameB.innerText = username
                    nicknameB.innerText = nickname
                    identityB.innerText = identity

                    // 创建一个标签，隐藏的，专门用于存放id的
                    var input = document.createElement('input')
                    input.setAttribute('type', 'hidden')
                    input.value = id
                    input.name = "id"
                    document.body.appendChild(input)
                }
            }
        }
    }
    console.log(document.querySelector('.li2'));
    document.querySelector('.li2').onclick = function () {
       
        // console.log(1111);
        var target = window.event.target || window.event.srcElement;
        if (target.className === 'logout') {
            var xhr = new XMLHttpRequest;
            xhr.open('get', 'http://localhost:8888/users/logout/' + target.getAttribute('data-id'))
            xhr.setRequestHeader('authorization', target.getAttribute('token'))
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        var res = xhr.responseText;
                        res = JSON.parse(res)
                        console.log(res);
                        var { code, message } = res;
                        if (code === 1) {
                            alert(message)
                            location.href = "home.html"
                        }
                    }
                }
            }
        }
    }
    fn()
    // 获取"编辑个人资料"按钮，并给他绑定单击事件 - 获取当前页面中显示的 用户的信息： 年龄、性别、昵称 ..  把这些信息放在数组中了 - 遍历数组，创建li - 创建了好多li，将很多li放在自己创建好的ol标签中，将ul使用ol替换掉
    // 点击这个按钮，原来的ul不见了，换了新的ol显示出来，ol中，放的是li>input - input里面是获取到年龄、性别、昵称 - 可以编辑了 - 编辑以后，点击确定按钮 - 做了2件事
    /*
    1.将写入的内容获取到，发送ajax进行数据库中的信息修改
    2.将此时显示的ol删掉，换成跟原来的显示ul一样的页面
    */
    // 新的 "编辑个人资料"点击没有用了，调用fn重新获取 "编辑个人资料"，并给他绑定事件
    function fn() {
        // 获取编辑个人资料的按钮
        var editBtn = document.querySelector('.edit')
        editBtn.onclick = function () {
            // 获取到原来显示的用户信息
            var usernameB = document.querySelector('.username')
            var nicknameB = document.querySelector('.nickname');
            var identityB = document.querySelector('.identity');

            var arr = []
            // 把获取到的信息放在数组中
            arr.push(usernameB.innerText)
            arr.push(nicknameB.innerText)
            arr.push(identityB.innerText)

            var ol = document.createElement('ol')
            // 遍历数组，创建li
            for (var i = 0; i < arr.length; i++) {
                var li = document.createElement('li')
                var input = document.createElement('input')
                input.value = arr[i]
                li.appendChild(input)
                ol.appendChild(li)
            }
            console.log(ol);
            bindEvent(ol, editBtn)
        }
    }
    function bindEvent(ol, editBtn) {
        // 创建确定按钮
        var button = document.createElement('button')
        button.innerText = '确定'
        ol.appendChild(button)
        console.log(ol);
        // 使用新创建好的ol替换掉原来的ul
        // console.log(editBtn.previousElementSibling.children);
        // console.log(ol);
        editBtn.parentElement.replaceChild(ol, editBtn.previousElementSibling)

        button.onclick = btnClick
        // 点击确定按钮
        function btnClick() {
            // 获取到当前输入的数据
            var lis = this.parentElement.children
            console.log(lis);
            // 获取刚刚输入的数据
            var username = lis[0].querySelector('input').value;
            var nickname = lis[1].querySelector('input').value;
            var identity = lis[2].querySelector('input').value;
            // var gender = lis[3].querySelector('input').value;
            console.log(username, nickname, identity);
            // 组合一个新的ul - 跟一开始显示的ul一样
            var str = `
            <ul>
                <li>
                    用户名：<b class="username">${username}</b>
                </li>
                <li>
                    昵称：<b class="nickname">${nickname}</b>
                </li>
                <li>
                    身份：<b class="identity">${identity}</b>
                </li>
            </ul>
            <div class="edit">编辑个人资料</div>
            `
            // 放到页面中显示
            this.parentElement.parentElement.innerHTML = str;
            // 发送请求修改数据 - 修改数据库中的数据
            promiseAjax({
                url: "http://localhost:8888/users/update",
                method: "post",
                data: {
                    id: document.querySelector('[name="id"]').value,
                    nickname,
                },
                headers: {
                    authorization: token,
                    "content-type": "application/x-www-form-urlencoded"
                }
            }).then(res => {
                console.log(res);
                // 新的放上来的 "编辑个人资料" 按钮不能点击 - 调用fn
                fn()
            })
        }
    }
    var editPass = document.querySelector('.editPass')
    var editPassForm = document.querySelector('.editPassForm')
    editPass.onclick = function () {
        
        content.style.display='none'
        editPassForm.style.display = 'block'
        var btn = document.querySelector('[type="button"]')
        btn.onclick = function () {
            var oldPassword = document.querySelector('[name="oldpassword"]').value
            var newPassword = document.querySelector('[name="newpassword"]').value
            var rNewPassword = document.querySelector('[name="repass"]').value

            promiseAjax({
                url: "http://localhost:8888/users/rpwd",
                method: "post",
                headers: {
                    authorization: token,
                    "content-type": "application/x-www-form-urlencoded"
                },
                data: {
                    id: document.querySelector('[name="id"]').value,
                    oldPassword: oldPassword,
                    newPassword: newPassword,
                    rNewPassword: rNewPassword
                }
            }).then(res => {
                var { code, message } = res;
                if (code === 1) {
                    alert(message);
                    location.href = "login.html"
                }
            })
        }

    }
}